<!-- ABB AbilityTM充电服务平台 -->
<template>
  <div class="abb-page">
    <div>
      <img
        src="https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/dxgjAdmin/userImg/logo1658470349386.png"
      />
    </div>
    <p class="fz32 mb10">
      <span class="henxinase ab"></span><br />
      ABB Ability<span class="kknmxeerw">TM</span>充电服务平台
    </p>
    <div class="banner-jjnwer">
      <img :src="bannerUrl" v-if="bannerUrl" class="w100 h100 dsfdrrewer" />
      <div
        class="kkkmnerrwe cf fz40 vertical-center sz"
        @click="photoShowModaler = true"
      >
        点击上传顶图
      </div>
    </div>
    <p class="fz26 bbm mt60">
      <span
        class="title-context sz"
        :class="indsd == 0 ? 'act' : ''"
        @click="indsd = 0"
        >客户端</span
      >
      <span
        class="title-context sz"
        :class="indsd == 1 ? 'act' : ''"
        @click="indsd = 1"
        >平台端</span
      >
    </p>
    <div v-if="indsd == 0">
      <div class="mt40">
        <p class="fz26 b">公桩充电</p>

        <div class="mt10 dsfdgfdgrtret">
          <abbskip
            type="5"
            puptitle="公桩充电"
            className="aa"
            :hideUrl="true"
            :showintroduce="true"
          ></abbskip>
        </div>
      </div>

      <div class="mt40">
        <p class="fz26 b">私桩管理</p>

        <div class="mt10 dsfdgfdgrtret">
          <abbskip
            type="6"
            puptitle="私桩管理"
            className="aa"
            :hideUrl="true"
            :showintroduce="true"
          ></abbskip>
        </div>
      </div>

      <div class="mt40">
        <p class="fz26 b">亮点</p>

        <div class="mt10">
          <abbskip
            type="7"
            puptitle="亮点"
            className="aa"
            :hideUrl="true"
          ></abbskip>
        </div>
      </div>
    </div>

    <div v-if="indsd == 1">
      <div class="mt40">
        <p class="fz26 b">亮点</p>
        <div class="mt10">
          <abbskip
            type="8"
            puptitle="亮点"
            className="aa"
            :hideUrl="true"
          ></abbskip>
        </div>
      </div>

      <div class="mt40">
        <p class="fz26 b">轮播图</p>
        <div class="mt10">
          <abbskip
            type="9"
            puptitle="轮播图"
            className="aa"
            :hideUrl="true"
            :hideTitle="true"
          ></abbskip>
        </div>
      </div>
    </div>

    <n-modal
      v-model:show="photoShowModaler"
      preset="card"
      class="Stock-diagnosis"
    >
      <template #header>
        <div>上传/选择栏目顶图</div>
      </template>
      <div>
        <photoGallery @getImg="getImger" types="充电服务平台"></photoGallery>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="photoShowModaler = false"> 取消 </n-button>
          <n-button class="ml10" type="info" @click="geturler"> 确定 </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
 <script lang='ts' setup>
import { ref } from "vue";
import abbskip from "../pressCenter/components/abbskip.vue";
import photoGallery from "../../../components/util/photoGallery";
import { dxget, dialog, dxdel, dxpost, hf } from "../../../util";
const bannerUrl = ref();
const indsd = ref(0);
const photoShowModaler = ref(false);
let videUrler = "";
const getImger = (data) => {
  videUrler = data;
};
const geturler = () => {
  photoShowModaler.value = false;
  bannerUrl.value = videUrler;
  upDataHome({ banner: videUrler });
};
const initData = async () => {
  const { data }: any = await dxget("abb/abbhomeBj", { id: 4 });
  bannerUrl.value = data.banner;
};
const upDataHome = async (cs) => {
  const { errno }: any = await dxpost(
    "abb/abbhomeBj",
    {
      id: 4,
      ...cs,
    },
    "put"
  );
  if (errno == 0) {
    window.$message.success("修改成功！");
  }
};
initData();
</script>
 <style scoped>
.kknmxeerw {
  position: relative;
  top: -20px;
  font-size: 14px;
}
.knmkxertwer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-column-gap: 10px;
  grid-row-gap: 10px;
}

.mkjnjerw {
  background: #fafafa;
}

.mkjnjerw img {
  height: 223px;
}
</style>